<template>
  <div class="divBox" style="padding: 0 !important;">
    <el-row :gutter="20" class="baseInfo">
      <!-- 应缴总金额 -->
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false" shadow="never" :body-style="{padding: '20px'}">
          <div class="acea-row align-center">
            <div class="icon-circle" style="background-color: #409EFF;">
              <i class="el-icon-money" style="color: white;"></i>
            </div>
            <div class="ml-10">
              <div class="data-title">应缴总金额</div>
              <div class="data-value">{{ viewData.totalPayableAmount || 0}}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 实付总金额 -->
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false" shadow="never" :body-style="{padding: '20px'}">
          <div class="acea-row align-center">
            <div class="icon-circle" style="background-color: #9254de;">
              <i class="el-icon-money" style="color: white;"></i>
            </div>
            <div class="ml-10">
              <div class="data-title">实付总金额</div>
              <div class="data-value">{{ viewData.totalPaymentAmount || 0}}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 线上缴费 -->
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false" shadow="never" :body-style="{padding: '20px'}">
          <div class="acea-row align-center">
            <div class="icon-circle" style="background-color: #faad14;">
              <i class="el-icon-bank-card" style="color: white;"></i>
            </div>
            <div class="ml-10">
              <div class="data-title">线上缴费</div>
              <div class="data-value">{{ viewData.onlinePayableAmount || 0}}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 线下缴费 -->
      <el-col v-bind="grid" class="ivu-mb">
        <el-card :bordered="false" shadow="never" :body-style="{padding: '20px'}">
          <div class="acea-row align-center">
            <div class="icon-circle" style="background-color: #52c41a;">
              <i class="el-icon-wallet" style="color: white;"></i>
            </div>
            <div class="ml-10">
              <div class="data-title">线下缴费</div>
              <div class="data-value">{{ viewData.offlinePayableAmount || 0}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  props: {
    viewData: {
      type: Object,
      default: () => {
        return {rules: []}
      }
    },
  },
  data() {
    return {
      grid: { xl: 6, lg: 6, md: 12, sm: 12, xs: 24 },
      saveLoading:false,
      statistics:[],
    };
  },
};
</script>

<style scoped lang="scss">
.divBox {
  //background: white;
}

.ivu-mb {
  margin-bottom: 20px;
}

.icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  i {
    font-size: 20px;
  }
}

.data-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.data-value {
  color: #333;
  font-size: 22px;
  font-weight: bold;
}

.ml-10 {
  margin-left: 10px;
}

.baseInfo {
  .el-card {
    border-radius: 4px;
    border: none;
    background-color: white;
  }
}
</style>
